<template>

  <el-descriptions title="个人信息">
    <el-descriptions-item label="用户名">{{ userInfo.username }}</el-descriptions-item>
    <el-descriptions-item label="真实姓名">
      <el-text v-if="userInfo.realname == null">暂未填写</el-text>
      <el-text v-else>{{ userInfo.realname }}</el-text>
    </el-descriptions-item>
    <el-descriptions-item label="性别">
      <el-text v-if="userInfo.sex == null">暂未填写</el-text>
      <el-text v-else>{{ userInfo.sex }}</el-text>
    </el-descriptions-item>
    <el-descriptions-item label="身份证号">
      <el-text v-if="userInfo.idCard == null">暂未填写</el-text>
      <el-text v-else>{{ userInfo.idCard }}</el-text>
    </el-descriptions-item>
    <el-descriptions-item label="手机号">
      <el-text v-if="userInfo.phone == null">暂未填写</el-text>
      <el-text v-else>{{ userInfo.phone }}</el-text>
    </el-descriptions-item>
    <el-descriptions-item label="电子邮箱">
      <el-text v-if="userInfo.email == null">暂未填写</el-text>
      <el-text v-else>{{ userInfo.email }}</el-text>
    </el-descriptions-item>
    <el-descriptions-item label="余额">{{ userInfo.money }}</el-descriptions-item>
  </el-descriptions>
  <el-button size="large" style="float: right;margin-top: 10px" type="success" @click="selectById">修改个人信息
  </el-button>
  <!-- 修改个人信息对话框开始 -->
  <el-dialog v-model="updateDialogShow" title="修改个人信息" width="500">
    <el-form>
      <el-form-item label="真实姓名" label-width="25%">
        <el-input v-model="updateInfo.realname" autocomplete="off" placeholder="请输入姓名" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="请选择性别" label-width="25%">
        <el-select v-model="updateInfo.sex" placeholder="请选择性别" style="width: 300px">
          <el-option label="男" value="男"/>
          <el-option label="女" value="女"/>
        </el-select>
      </el-form-item>
      <el-form-item label="身份证号" label-width="25%">
        <el-input v-model="updateInfo.idCard" autocomplete="off" placeholder="请输入身份证号" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="手机号" label-width="25%">
        <el-input v-model="updateInfo.phone" autocomplete="off" placeholder="请输入手机号" style="width: 300px"/>
      </el-form-item>
      <el-form-item label="电子邮箱" label-width="25%">
        <el-input v-model="updateInfo.email" autocomplete="off" placeholder="请输入电子邮箱" style="width: 300px"/>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="updateDialogShow = false">取消</el-button>
        <el-button type="primary" @click="update">确定</el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改个人信息对话框结束-->
</template>

<script setup>
import userApi from "@/api/userApi.js";
import {ref} from "vue";
import {ElMessage} from "element-plus";


const updateDialogShow = ref(false)
const userInfo = ref({})
const updateInfo = ref({
  realname: null,
  sex: null,
  idCard: null,
  phone: null,
  email: null,
});

function getInfo() {
  userApi.getInfo()
      .then(resp => {
        userInfo.value = resp.data;
      })

}

function selectById() {
  userApi.getInfo()
      .then(resp => {
        updateInfo.value = resp.data;
        updateDialogShow.value = true;
      });
}

//修改
function update() {
  userApi.updateInfo(updateInfo.value)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
          updateDialogShow.value = false;
          getInfo();
        } else {
          ElMessage.error(resp.msg);
        }
      })
}

getInfo();
</script>

<style scoped>

</style>